<template>
	<view class="content">
		<u-navbar title="订单详情" :placeholder='true' height="88rpx" leftIconColor="#fff"
			titleStyle='color:#fff;font-size:32rpx' left-icon-size="32rpx" bg-color="#FF594D" :autoBack="true">
		</u-navbar>
		<view class="" v-if="pageFlag">
			<view class="address_bar">
				<view class="address_item">
					<view class="address_left">
						<view class="name">{{orderInfoData.userName}}</view>
						<view class="default_address">默认地址</view>
						<!-- <view class="default_address"></view> -->
					</view>
					<view class="address_center">
						<view class="address_tel">
							{{orderInfoData.phone}}
						</view>
						<view class="address_text">
							{{address}}
						</view>
					</view>
					<view class="address_right">
						<!-- <u-icon name="arrow-right" color="#777777" size="12px"></u-icon> -->
					</view>
				</view>
			</view>

			<view class="discount_coupon">
				<view class="discount_left">
					优惠券
				</view>
				<view class="discount_num">
					{{coupon.name}}
				</view>
				<view class="discount_right">
					<!-- <u-icon name="arrow-right" color="#777777" size="12px"></u-icon> -->
				</view>
			</view>
			<view class="delivery_code" v-if="orderInfoData.orderType==2&&orderInfoData.payStatus==1">
				<!-- <image :src="orderInfoData.xxx" mode=""></image> -->
				<view class="bar_code">
					提货码
				</view>
				<image :src="baseUrl + '/files/' + orderInfoData.xxx.split('/')[orderInfoData.xxx.split('/').length-1]"></image>
				<!-- {{orderInfoData.xxx}} -->
			</view>

			<view class="goods_total">
				<view class="total_list">
					<template v-for="(item,index) in orderInfoData.orderDetails">
						<view class="goods_item" :key="index">
							<goods-num :item='item'>
							</goods-num>
						</view>
					</template>
				</view>
				<view class="line">
					<u-line></u-line>
				</view>
				<view class="money">
					<view class="">
						商品合计
					</view>
					<view class="">
						<text
							v-if="orderInfoData.discountAmount">(￥{{orderInfoData.totalAmount}}-￥{{orderInfoData.discountAmount}})</text>
						<text
							style="padding-left: 20rpx;">￥{{(orderInfoData.totalAmount-orderInfoData.priceFreight-orderInfoData.discountAmount).toFixed(2)}}元</text>
					</view>
				</view>
				<view class="line">
					<u-line></u-line>
				</view>
				<view class="money">
					<view class="">
						运费
					</view>
					<view class="">
						￥{{orderInfoData.priceFreight?orderInfoData.priceFreight:0}}元
					</view>
				</view>
				<view class="line">
					<u-line></u-line>
				</view>
				<view class="money already_money">
					<view class="">

					</view>
					<view class="">
						{{getStatusText(orderInfoData.status)}}：{{orderInfoData.amount}}元
					</view>
				</view>
				<view class="line">
					<u-line></u-line>
				</view>
				<view class="money">
					<view class="">
						订单编号：{{orderInfoData.number}}
					</view>
					<view class="already_evaluate">
						{{getStatusText(orderInfoData.status)}}
					</view>
				</view>
				<view class="line">
					<u-line></u-line>
				</view>
				<view class="order_status">
					<view class="status_left" v-if="orderInfoData.orderTime">
						下单时间：{{orderInfoData.orderTime}}
					</view>
					<view class="status_left" v-if="orderInfoData.checkoutTime">
						结账时间：{{orderInfoData.checkoutTime}}
					</view>
					<!-- 				<view class="status_left" v-if="orderInfoData.orderTime">
							已发货：{{orderInfoData.orderTime}}
						</view> -->
					<view class="status_left" v-if="orderInfoData.arrivalTime">
						到货时间：{{orderInfoData.arrivalTime}}
					</view>
					<view class="" v-if="orderInfoData.arrivalTime">
						已收货：{{orderInfoData.arrivalTime}}
					</view>
					<view class="status_left" v-if="orderInfoData.deliveryTime">
						订单完成时间：{{orderInfoData.deliveryTime}}
					</view>
					<!-- 				<view class="status_left" v-if="orderInfoData.cancelTime">
							订单取消时间：{{orderInfoData.cancelTime}}
						</view> -->
				</view>
				<view class="line">
					<!-- <u-line></u-line> -->
				</view>
			</view>
			<u-popup :show="delModel_show" round="10" mode="center">
				<view class="delModel">
					<view class="delTitle">
						<text>申请退款</text>
						<view class="close" @click="delModel_show = false">
							<image src="../../static/images/address-administration/图标@2x.png" mode=""></image>
						</view>
					</view>
					<view class="delText">
						是否申请退款
					</view>
					<view class="operation">
						<view @click="delModel_show = false" class="btn operation_left">
							取消
						</view>
						<view @click="cancel" class="btn operation_right">
							确定
						</view>
					</view>
				</view>
			</u-popup>

			<view class="evaluate_title" @click="evaluate_show = true"
				v-if="orderInfoData.comments==1&& orderInfoData.payStatus==1&& orderInfoData.status!=3&&orderInfoData.status!=4&& orderInfoData.status !=6&& orderInfoData.status!=7&& orderInfoData.status!=8&& orderInfoData.status!=9&& orderInfoData.status!=10">
				去评价
			</view>
			<view class="goods_evaluate"
				v-if="orderInfoData.comments==2&& orderInfoData.payStatus==1&& orderInfoData.status!=3&&orderInfoData.status!=4&& orderInfoData.status !=6&& orderInfoData.status!=7&& orderInfoData.status!=8&& orderInfoData.status!=9&& orderInfoData.status!=10">
				<view class="evaluate_title2" v-if="orderInfoData.comments!=1">
					评价
				</view>

				<view class="line" v-if="orderInfoData.comments==2">
					<u-line></u-line>
				</view>
				<view class="">
					<view class="evaluate_status">
						<view class="status_left">
							评价时间：{{commen.createTime}}
						</view>
						<view class="">
							图片信息：
						</view>
					</view>

					<view class="evaluate_image">
						<view class="evaluate_image_content">
							<template v-for="(item,index) in commen.commodityName.split(',')">
								<view class="image_item" :key="index">
									<image :src="item" mode=""></image>
								</view>
							</template>
						</view>
					</view>
					<view class="evaluate_status">
						<view class="status_left">
							内容信息：{{commen.content}}
						</view>
					</view>

				</view>
			</view>
			<u-popup :show="evaluate_show" bgColor="transparent" @close="close" mode='center' @open="open">
				<view class="evaluate_wapper">
					<view class="evaluate_info">
						<view class="evaluate_tit">
							评价
							<image @click="close" src="../../static/images/order-detail/3.Icons@2x.png" mode=""></image>
						</view>
						<view class="evaluate_text" style="position: relative;z-index: 111;">
							<u--textarea border="none" height="217rpx" v-model="evaluate_text" placeholder="请输入内容"></u--textarea>
						</view>
						<view class="upload">
							<u-upload width="140rpx" height="140rpx" uploadText='上传图片' uploadIcon='plus' :fileList="fileList1"
								@afterRead="afterRead" @delete="deletePic" name="1" accept="image" multiple :maxCount="3"></u-upload>
							<view class="hint">
								最多可上传三张图片
							</view>
						</view>
						<view class="submit">
							<view class="submit_btn" @click="submit">
								确认
							</view>
						</view>
					</view>
				</view>
			</u-popup>

			<view class="refund"
				v-if="orderInfoData.payStatus==1&&orderInfoData.status!=7&&orderInfoData.status!=8&&orderInfoData.status!=5"
				@click="delModel_show = true">
				申请退款
			</view>

		</view>
	</view>
</template>

<script>
	import {
		orderInfo,
		orderDetail,
		getCouponInfo,
		userRefund
	} from '../../../api/mine.js'
	import {
		addCommen,
		queryCommen
	} from '../../api/evaluate.js'
	import baseUrl from '../../../utils/base.js'
	export default {
		onLoad(option) {
			// console.log(option);
			this.getOrderInfo(option.id)
			// this.getOrderDetail(135)
		},
		data() {
			return {
				pageFlag: false,
				titleStyle: {
					color: '#fff',
				},
				delModel_show: false,
				orderInfoData: {
					"id": 0,
					"number": "0",
					"addressBookId": 0,
					"buyNumber": null,
					"orderType": null,
					"mode": 1,
					"payType": 1,
					"payStatus": 0,
					"status": 1,
					"userId": 1,
					"userName": "124141",
					"couponIds": 7,
					"phone": "41241414444",
					"address": "124141,41241414444,香港特别行政区,香港特别行政区,中西区,412414",
					"commodityId": 1,
					"totalAmount": null,
					"amount": 1,
					"discountAmount": null,
					"priceFreight": null,
					"arrivalTime": null,
					"cancelReason": null,
					"cancelTime": null,
					"rejectionReason": null,
					"deliveryTime": null,
					"orderTime": "2024-01-25",
					"checkoutTime": null,
					"comments": 1,
					"xxx": null,
					"placeStatus": null,
					"orderDetails": [{
						"id": 0,
						"orderId": 0,
						"commodityId": 1,
						"name": "茶杯",
						"image": "https://zhanliuzhu.oss-cn-beijing.aliyuncs.com/e50e1bc6-be23-40b4-a7c2-1b30d7c933ac.jpg",
						"specificationId": null,
						"specificationName": "货架",
						"specificationAmount": 0,
						"specificationNumber": 1
					}],
					"redenvelopeId": null
				},
				address: '',

				coupon: {
					name: ''
				},
				evaluate_show: false,
				evaluate_text: '',
				fileList1: [],
				urls: [],
				"commen": {
					"commodityName": null,
					"id": null,
					"orderId": null,
					"userId": null,
					"employeeId": null,
					"commodityId": 2,
					"content": "",
					"reply": null,
					"avatar": null,
					"score": null,
					"createTime": null,
					"updateTime": null
				},
				baseUrl
			}
		},
		methods: {
			navigateTo(url) {
				uni.navigateTo({
					url
				})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.evaluate_show = false
			},
			// 通过订单号查询个人评论
			async getCommenData(data) {
				const res = await queryCommen(data)
				this.commen = res.data
				// console.log(res);
			},
			// 用户申请退款
			async refund(data) {
				const res = await userRefund(data)
				console.log(res);
				uni.showToast({
					title: res.msg,
					icon: 'none',
					success() {
						setTimeout(() => {
							if (res.code == 200) {
								uni.redirectTo({
									url: '/pages_mine/pages/mine-order/mine-order?index=0'
								})
							}
						}, 1000)
					}
				})
			},
			// 获取订单详情
			async getOrderInfo(id) {
				const res = await orderInfo(id)
				if (res.code == 200) {
					this.pageFlag = true
				} else {
					return
				}
				this.orderInfoData = res.data
				// console.log(this.orderInfoData);
				this.address = this.orderInfoData.address.split(',').reduce((add, item, index) => {
					if (index != 0 && index != 1 && item !== undefined) {
						// console.log(item);
						return add += item
					}
				}, '')

				this.address = this.address.replaceAll('undefined', '')
				// console.log(this.orderInfoData);
				if (this.orderInfoData.couponIds) {
					const res1 = await getCouponInfo(this.orderInfoData.couponIds)
					this.coupon = res1.data
				}
				if (this.orderInfoData.comments) {
					this.getCommenData(res.data.id)
				} else {
					console.log('商品未评论');
				}
			},
			async getOrderDetail(id) {
				const res = await orderDetail(id)
				console.log(res);
			},
			cancel() {
				if (this.orderInfoData.payStatus == 1) {
					// console.log(this.orderInfoData.id);
					// this.refund(this.orderInfoData)
					this.refund({
						number: this.orderInfoData.number,
						buyNumber: this.orderInfoData.buyNumber,
						orderType: this.orderInfoData.orderType,
						mode: this.orderInfoData.mode
					})
					this.delModel_show = false
				}
			},
			getStatusText(status) {
				switch (status) {
					// 订单状态 1待付款 2模糊支付状态 3 待发货 4已发货 5已完成 
					// 6已取消 7退款中 8管理员同意退款 9待拼单 10待取货
					case 1:
					case 2:
						return '待付款'
					case 3:
						return '待发货'
					case 4:
						return '已发货'
					case 5:
						return '已完成'
					case 6:
						return '已取消'
					case 7:
						return '退款中'
					case 8:
						return '管理员同意退款'
					case 9:
						return '待拼单'
					case 10:
						return '待取货'
				}
			},
			// 确认提交
			submit() {
				console.log(this.evaluate_text);
				console.log(this.fileList1);

				this.fileList1.forEach(item => {
					console.log(item);
					!(async () => {
						const res = await this.uploadFilePromise(item.url)
						// console.log(res);
						this.urls.push(JSON.parse(res.data).msg)
					})()
				})
				setTimeout(() => {
					this.addGoodsCommen({
						orderId: this.orderInfoData.id,
						userId: this.orderInfoData.userId,
						commodityName: this.urls.join(),
						commodityId: this.orderInfoData.orderDetails[0].commodityId,
						content: this.evaluate_text,
						avatar: this.$store.state.user.avatar
					})
				}, 500)
			},
			async addGoodsCommen(data) {
				const res = await addCommen(data)
				console.log(res);
				if (res.code == 200) {
					uni.showToast({
						title: '评价成功',
						success: () => {
							this.evaluate_show = false
						}
					})
				}
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
					}))
					fileListLen++
				}
			},

			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: baseUrl + '/common/uploadOss',
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							resolve(res)
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f3f3f3;
		min-height: 100vh;
		padding-bottom: 30rpx;
		box-sizing: border-box;

		.u-safe-area-inset-bottom {
			padding: 0;
		}

		.refund {
			background-color: #fff;
			height: 100rpx;
			font-size: 36rpx;
			margin-top: 20rpx;
			line-height: 100rpx;
			text-align: center;
			color: red;
		}

		.delModel {
			width: 656rpx;
			height: 339rpx;
			box-sizing: border-box;
			padding: 24rpx 20rpx;

			.delTitle {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #333332;
				display: flex;
				justify-content: space-between;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.delText {
				height: 170rpx;
				text-align: center;
				line-height: 170rpx;
			}

			.operation {
				display: flex;
				justify-content: center;

				.btn {
					width: 170rpx;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					box-sizing: border-box;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
				}

				.operation_left {
					border: 1rpx solid #FF594D;
					color: #FF594D;
					box-sizing: border-box;
					margin-right: 36rpx;
				}

				.operation_right {
					background: #FF594D;
					color: #FFFFFF;
				}
			}
		}

		.line {
			padding: 20rpx 0;
		}

		.address_item {
			display: flex;
			align-items: center;
			width: 750rpx;
			height: 158rpx;
			background-color: #fff;
			margin: 20rpx 0;
			box-sizing: border-box;
			padding: 0 0 0 30rpx;

			.address_left {
				color: #333332;
				font-size: 32rpx;
				width: 140rpx;

				.default_address {
					margin-top: 24rpx;
					width: 92rpx;
					height: 33rpx;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					border: 1rpx solid #FF594D;
					font-size: 18rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #FF594D;
					text-align: center;
					line-height: 33rpx;
				}
			}

			.address_center {
				width: 530rpx;
				height: 100%;

				&.not_adress {
					width: 670rpx;
					font-size: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #777777;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.address_tel {
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #333332;
					padding-top: 35rpx;
				}

				.address_text {
					font-size: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #777777;
					margin-top: 32rpx;
				}
			}
		}

		.delivery_code {
			background-color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 20rpx;
			padding-bottom: 40rpx;

			.bar_code {
				height: 90rpx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #333332;
				width: 100%;
				line-height: 90rpx;
				padding-left: 30rpx;
				box-sizing: border-box;

			}

			image {
				width: 300rpx;
				height: 300rpx;
			}
		}

		.discount_coupon {
			width: 750rpx;
			height: 90rpx;
			display: flex;
			align-items: center;
			background-color: #fff;
			padding-left: 30rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;

			.discount_left {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #333332;
				width: 335rpx;
				margin-right: 37rpx;
			}

			.discount_num {
				width: 302rpx;
				height: 36rpx;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #777777;
				text-align: right;
				box-sizing: border-box;
				padding-right: 5rpx;
			}
		}

		.goods_total {
			width: 750rpx;
			// height: 388rpx;
			background: #FFFFFF;
			padding: 20rpx 20rpx 0;
			box-sizing: border-box;

			.goods_item {
				margin-bottom: 20rpx;

				&:last-of-type {
					margin-bottom: 0;
				}
			}

			.money {
				display: flex;
				width: 100%;
				// height: 74rpx;
				align-items: center;
				justify-content: space-between;
				// border-top: 1rpx solid rgba(170, 170, 170, 0.3);
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #777777;
			}

			.already_money {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #F44236;
			}

			.already_evaluate {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #FFA242;
			}

			.order_status {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #777777;

				.status_left {
					padding-bottom: 10rpx;
				}
			}
		}

		.payment {
			width: 750rpx;
			height: 160rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 0 27rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;

			.payment_price {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #F44236;

				.price {
					font-size: 30rpx;
				}
			}

			button {
				width: 346rpx;
				height: 78rpx;
				background: #FF594D;
				border-radius: 67rpx 67rpx 67rpx 67rpx;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 78rpx;
				margin: 0;
			}
		}

		.evaluate_title {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #D54939;
			height: 100rpx;
			line-height: 100rpx;
			background-color: #fff;
			margin-top: 20rpx;
			padding-left: 20rpx;

		}

		.evaluate_wapper {
			width: 656rpx;
			height: 739rpx;
			padding: 24rpx 20rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			background-color: #fff;

			.evaluate_tit {
				font-size: 32rpx;
				color: #333332;
				margin-bottom: 34rpx;
				position: relative;
				text-align: center;

				image {
					width: 32rpx;
					height: 32rpx;
					position: absolute;
					right: 0;
					top: 7rpx;
				}
			}

			.evaluate_text {
				background-color: #f3f3f3;
				margin-bottom: 40rpx;
			}

			.hint {
				font-size: 24rpx;
				color: #FF2525;
				padding: 40rpx 0;
			}

			.submit {
				display: flex;
				justify-content: center;

				.submit_btn {
					background: #D54939;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					width: 425rpx;
					height: 56rpx;
					text-align: center;
					line-height: 56rpx;
					font-size: 26rpx;
					color: #FFFFFF;
				}
			}
		}

		.goods_evaluate {
			background-color: #fff;
			padding: 24rpx 20rpx;
			margin-top: 20rpx;

			.evaluate_title2 {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #D54939;
			}

			.evaluate_status {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #777777;

				.line {
					padding: 24rpx 0;
				}

				.status_left {
					padding-bottom: 10rpx;
				}
			}

			.evaluate_image {
				.evaluate_image_content {
					display: flex;
					padding: 24rpx 20rpx;
					flex-wrap: wrap;

					.image_item {
						width: 140rpx;
						height: 140rpx;
						margin-right: 30rpx;
						margin-bottom: 24rpx;

						image {
							width: 140rpx;
							height: 140rpx;

						}
					}

					.image_item:nth-of-type(4n+0) {
						margin-right: 0;
					}
				}
			}
		}
	}
</style>